<script setup>
import {ref} from "vue";

let hello = (name) => {
  console.log(`hello ${name}`)
}
let url = "https://www.baidu.com"
let testPrevent1 = () => {
  alter("阻止默认行为")
}
let testPrevent2 = () => {
  if (!confirm("确定阻止默认行为吗？")) {
    // 阻止默认行为
    event.preventDefault()
  }
}
let testDIV = () => {
  alert("DIV")
}
let testBTN = () => {
  //阻止事件传播（阻止事件冒泡）
  alert("BTN")
}
// 响应式数据 当发生变化时,会自动更新 dom树
let count = ref(0)
let addCount = () => {
  count.value++
}
let incrCount = (event) => {
  count.value--
  // 通过事件对象阻止组件的默认行为
  event.preventDefault();
}
</script>

<template>
  <div>
    <button value="点击" @click="hello('张三')"></button>
    <a href="url" @click.prevent="testPrevent1">百度一下</a>
    <a :href="url" @click="testPrevent2">注销</a>
    <div style="width: 300px; height: 300px; background-color: red;" @click="testDIV">
      <input type="button" value="测试事件冒泡" @click="testBTN">
    </div>
    <h1>count的值是:{{ count }}</h1>
    <!-- 方法事件处理器 -->
    <button v-on:click="addCount()">addCount</button>
    <br>
    <!-- 内联事件处理器 -->
    <button @click="count--">incrCount</button>
    <br>
    <!-- 事件修饰符 once 只绑定事件一次 -->
    <button @click.once="count++">addOnce</button>
    <br>
    <!-- 事件修饰符 prevent 阻止组件的默认行为 -->
    <a href="http://www.atguigu.com" target="_blank" @click.prevent="count++">prevent</a> <br>
    <!-- 原生js方式阻止组件默认行为 (推荐) -->
    <a href="http://www.atguigu.com" target="_blank" @click="incrCount($event)">prevent</a> <br>
  </div>
</template>

<style scoped>

</style>